https://mp.weixin.qq.com/s/LR9EzkUZTE1f5nT_z_f6zg

Sentry 是一套开源的实时异常收集、追踪、监控系统，支持几乎所有的语音和平台。

这套系统由对应各种语言的 SDK 和一套庞大的数据后台服务组成，
通过 Sentry SDK 的配置，可以上报错误关联的版本信息、发布环境。
同时 Sentry SDK 会自动捕捉异常发生前的相关操作，便于后续异常追踪。
最后，异常数据上报到数据服务之后，会通过过滤、关键信息提取、
归纳展示在数据后台的 Web 界面中，功能架构如下图所示。

我们使用umi项目接入sentry进行演示。首先，我们创建一个基于umi的React项目。


mkdir umi-sentry && cd  umi-sentry
yarn create umi

然后，我们在项目中安装sentry插件。

npm install --save @sentry/react @sentry/tracing

<!-- 4.1 接入sentry -->

首先，我们在React项目的入口文件index.ts中初始化sentry，示例如下。

import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "https://xdfa@o1334810.ingest.sentry.io/121",
  integrations: [new BrowserTracing()],
  release: '0.0.1',
  tracesSampleRate: 1.0,
});

接着，我们手动触发一个异常，看是否能正确上报到sentry。

<!-- 4.2 上传sourcemap -->

首先，在根目录创建配置文件 .sentryclirc，然后配置如下选项。

[auth]
token=TOKEN控制台获取，TOKEN需要勾选project:write写入权限

[defaults]
url=https://sentry.io/ // 默认地址
org=组织名称，控制台获取
project=react // 项目名称
接着，我们再安装sourcemap配置上传插件。

npm i @sentry/webpack-plugin -D
然后，在.umirc.ts文件中添加如下配置。

const SentryPlugin = require('@sentry/webpack-plugin');

export default {
  devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval', // 开启sourcemao
  chainWebpack(config, { webpack }){
    if (process.env.NODE_ENV === 'production'){//当为prod时候才进行sourcemap的上传，如果不判断，在项目运行的打包也会上传
      config.plugin("sentry").use(SentryPlugin, [{
        ignore: ['node_modules'],
        include: './dist', //上传dist文件的js
        configFile: './sentryclirc', //配置文件地址，这个一定要有，踩坑在这里，忘了写导致一直无法实现上传sourcemap
        release:'1.0.1', //版本号，自己定义的变量，整个版本号在项目里面一定要对应
        deleteAfterCompile: true,
        urlPrefix: '~/' // js的代码路径前缀
       }])
    }
  },
};
执行打包上传sourcemap。进入dist文件，启动http-server 本地服务模拟线上效果。

6、上传
执行 npm run build 即可上传源代码了